<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>表</title>
		<style>

			.box {
				width: 600px;
				height: 600px;
				background-image: linear-gradient(to right bottom, white, gray);
				/* 左右居中 */
				margin: 60px auto 0;
				border-radius: 300px;
				box-shadow: 20px 20px 30px 0 gray;
				overflow: hidden;
			}

			.clock {
				width: 500px;
				height: 500px;
				border-radius: 250px;
				background-color: white;
				margin: 50px;
				position: relative;
			}

			.dot {
				width: 4px;
				height: 250px;
				/*background: red;*/
				position: absolute;
				left: 248px;
				transform-origin: center bottom;
			}

			.clock>.dot:nth-child(5n+1) {
				width: 8px;
			}

			.clock>.dot:nth-child(5n+1)>span {
				height: 12px;
			}


			.dot>span {
				width: 100%;
				height: 8px;
				background: black;
				display: block;
			}

			#hour {
				width: 16px;
				height: 120px;
				background: black;
				position: absolute;
				left: 242px;
				bottom: 250px;
				transform-origin: center bottom;
			}

			#minute {
				width: 10px;
				height: 180px;
				background: blue;
				position: absolute;
				left: 245px;
				bottom: 250px;
				transform-origin: center bottom;
			}

			#second {
				width: 6px;
				height: 220px;
				background: yellow;
				position: absolute;
				left: 247px;
				bottom: 250px;
				transform-origin: center bottom;
			}


		</style>
	</head>
	<body>
		<div class="box">
			<div class="clock">
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>
				<div class="dot"><span></span></div>

				<div id="hour"></div>
				<div id="minute"></div>
				<div id="second"></div>
				
			</div>
		</div>
		
	</body>
</html>
<script>
	var dotDivs = document.getElementsByClassName('dot');

	for (var i = 0; i < 60; i++) {
		// console.log(dotDivs[i]);
		dotDivs[i].style.transform = "rotate(" + i * 6 + "deg)";
	}

	var hourDiv = document.getElementById('hour');
	var minuteDiv = document.getElementById('minute');
	var secondDiv = document.getElementById('second');

	function clock() {

		var date = new Date();
		// 获取小时
		var h = date.getHours();
		// 获取分钟
		var m = date.getMinutes();
		// 获取秒
		var s = date.getSeconds();

		secondDiv.style.transform = "rotate(" + s * 6 + "deg)";

		minuteDiv.style.transform = "rotate(" + (m * 6 + 6 / 60 * s) + "deg)";

		hourDiv.style.transform = "rotate(" + (h * 30 + 30 / 60 * m + 30 / 3600 * s) + "deg)";

	}
	clock();

	setInterval(clock, 500);




</script>



